<template>
	<view class="root-packbox flex-direction-column relative">
		<slot name="nav"></slot>

		<slot style="z-index: 100" name="page"></slot>

		<template v-if="useRootSence !== 'login'">
			<comPopup v-model="showAuthPhoneUsers" style="z-index: 100000" :title="mandateName" popupOfHeight="482rpx">
				<template #footer>
					<!-- #ifdef MP-WEIXIN -->
					<view class="" style="margin-bottom: 28rpx; font-size: 28rpx; color: #FFF;">
						{{ mandateTxt }}
					</view>
					<view class="" style="margin-bottom: 20rpx;">
						<comMpPrivacy v-model="isShowPrivas"></comMpPrivacy>
					</view>
					<!-- #endif -->
					
					<!-- #ifdef APP-PLUS -->
					<view class="relative" style="font-size: 28rpx; top: -48rpx;color: #111111;">
						{{ mandateTxt }}
					</view>
					<!-- #endif -->
					
					<view class="flex-end" style="padding: 32rpx 0 18rpx;">
						<view class="flex-align-items-center">
							<comBgView v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-close-btn.png`" @click="showAuthPhoneUsers = false">
								<view class="font-hanserif-bold"
									:style="{
										'width': '170rpx',
										'height': '56rpx', 
										'line-height': '56rpx',
										'text-align': 'center',
										'font-size': '36rpx',
										'color': '#FFFFFF',
									}"
								>
									拒绝
								</view>
							</comBgView>
							
							<view style="width: 42rpx;"> </view>
							
							<button v-if="!isShowPrivas" class="trans-button" @click="setPrivasFun">
								<comBgView
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-sure-btn.png`"
									style="width: 170rpx; height: 56rpx;">
									<view class="font-hanserif-bold" style=" width: 170rpx; height: 56rpx; line-height: 56rpx;text-align: center;font-size: 34rpx;color: #4470FF;">
										允许
									</view>
								</comBgView>
							</button>
							<template v-else>
								<button v-if="showOnceReloginPopup" class="trans-button" @click="setPrivasFun">
									<comBgView
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-sure-btn.png`"
									style="width: 170rpx; height: 56rpx;">
										<view class="font-hanserif-bold" style=" width: 170rpx; height: 56rpx; line-height: 56rpx;text-align: center;font-size: 34rpx;color: #4470FF;">允许</view>
									</comBgView>
								</button>
								
								<button v-if="!showOnceReloginPopup" class="trans-button" :open-type="hidePrivacyUsers ? 'getPhoneNumber' : 'getPhoneNumber|agreePrivacyAuthorization'" @getphonenumber="getPhoneNumber">
									<comBgView
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-sure-btn.png`"
									style="width: 170rpx; height: 56rpx;">
										<view class="font-hanserif-bold" style=" width: 170rpx; height: 56rpx; line-height: 56rpx;text-align: center;font-size: 34rpx;color: #4470FF;">允许</view>
									</comBgView>
								</button>
							</template>
						</view>
					</view>
				</template>
			</comPopup>
		</template>

		<comTextPopup v-model="showAgreeTxtPopup" :isAllowedClickMaskClose="false" :isNeedReadedClose="canCloseAgreement ? true : false" @scrolltolower="scrolltolower">
			<template #title>《购买协议》&《隐私条款》</template>
			<template>
				<view v-html="agreeBoxContent"></view>
			</template>
		</comTextPopup>
		<comTextPopup v-model="showPrivacyPopup" :isAllowedClickMaskClose="false" :isNeedReadedClose="canCloseAgreement ? true : false" @scrolltolower="scrolltolower">
			<template #title>《购买协议》&《隐私条款》</template>
			<template>
				<view v-html="agreeBoxContent"></view>
			</template>
		</comTextPopup>

		<comGroupPopup v-model="showJoinGroupPopup" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :qrAppCodeLink="`${commonConfigs.domainFrontFileLink}/files/images/common/groupCode.png?d=` + timeLenStr"></comGroupPopup>
		
		<!-- #ifdef MP-WEIXIN -->
		<comGroupPopup
			v-model="isShowLastPlatformPopup"
			:isAllowedClickMaskClose="false"
			type="lastPlatform"
			v-if="commonConfigs && commonConfigs.domainFrontFileLink"
			:lastPlatformTxt="lastPlatformTxt"
			:qrAppCodeLink="lastPlatformPath"
			:popupBgLink="`${commonConfigs.domainFrontFileLink}/files/images/common/new-mini-bg.png`"
		>
		</comGroupPopup>
		<!-- #endif -->
		
		<!-- 封禁提示 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="mask-view flex-all-center fixed" v-if="showLockAccountPopup">
			<view class="mask-modal flex-all-center">
				{{ lockAccountTxt }}
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<comModalPopup v-model="showLockAccountPopup" :isShowCancel="false" title="提示" 
		style="z-index: 1000000000;text-align: center;" :content="lockAccountTxt" confirmText="确认" @confirm="showLockAccountPopup = false" />
		<!-- #endif -->

		<!-- app下载 -->
		<comGroupPopup
			v-model="showAppQrcodePopup"
			type="appdownload"
			v-if="commonConfigs && commonConfigs.domainFrontFileLink"
			:qrAppCodeLink="`${commonConfigs.domainFrontFileLink}/files/images/common/appDown.png?d=` + timeLenStr"
			:popupBgLink="`${commonConfigs.domainFrontFileLink}/files/images/common/appDownBg.png`"
		>
		</comGroupPopup>
		
		<!-- 限额 温馨提示 -->
		<comTextPopup v-model="showRechargePopup" :isAllowedClickMaskClose="false" :isNeedReadedClose="false" scrollHeight="92%">
			<template #title>
				温馨提示
			</template>
			<template>
				<view v-html="limitAmountTxt"></view>
			</template>
			<template #footer>
				<view style="z-index: 10000;position: relative;padding: 0 26rpx;">
					<label :class="['flex flex-align-items-center']" @click="checkRecharge">
						<image :src="isLimitAmountRead ? '/static/images/checked.png' : '/static/images/check.png'" style="width: 26rpx;height: 26rpx; flex-shrink: 0; margin-top: -32rpx;"
							mode=""></image>
						<view class="flex flex-align-items-center font-hanserif-bold" style="margin-left: 10rpx; color: #FFF; font-size: 24rpx;">
							我已了解盲盒玩法的不确定性,并自愿承担有可能出现的损失风险。
						</view>
					</label>
				</view>
				<view @click="closeLimitWarmUppopFun" class="text-center relative margin-auto"
					style="width: 290rpx;height: 82rpx;margin-top: 90rpx;"
					:style="{
						opacity: isLimitAmountRead ? 1 : 0.5
					}">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-btn-bg.png`" mode=""></image>
				</view>
			</template>
		</comTextPopup>

		<!-- 小程序隐私保护指引设置 -->
		<!-- #ifdef MP-WEIXIN -->
		<comPrivacyPopup style="z-index: 100000;" title="用户隐私保护提示" popupOfHeight="482rpx"></comPrivacyPopup>
		<!-- #endif -->
		
		<!-- 系统通知 -->
		<comNotify v-model="isShowSystemNoticeUppop" :systemNoticeData="systemNoticeData"></comNotify>
		
		<!-- app启动页 -->
		<!-- #ifdef APP-PLUS -->
		<comLaunchPage v-if="!commonOnline && isShowStartupPage && isStartupEnd" @startupPageCloseFun="startupPageCloseFun"></comLaunchPage>
		<!-- #endif -->
		
		<!-- 首页弹框轮播图 -->
		<comNewPersonPopup v-model="showNewPersonPopupData" :reslists="newpersonBannerList" :current="newpersonBannerIndex">
		</comNewPersonPopup>
	</view>
</template>

<script>
	import store from '@/store';
	
	import { MUTATIONS as UserMutai } from '@/store/modules/userStore';

	import { 
		setAuthPhoneUsers, 
		setAuthUserInfoUsers, 
		authPhoneSetFun, 
		authUserInfoSetFun,
		setParseFunTime,
		setAsyncFunWait,
	} from '@/setupproject/TOOLS_FUN';

	import {
		getCheckUserBanApi, 
		getContentHomeApi,
		getEmailHomeApi,
		getPayTypeApi,
		getConfigHomeApi,
		getUserViewPayAgreementApi,
		getHomePersonPoolNewApi, 
		getUserPayNoticeHitApi,
		getConfigNeedJumpApi,
	} from '@/setupproject/INTERFACE';

	export default {
		name: 'comRoot',
		props: {
			
			isCurrentTabbarSence:{
				type: Boolean,
				default: () => false
			},
			isShowLimitWarm:{
				type: Boolean,
				default: () => false
			},
			useRootSence: {
				type: String,
				default: () => ''
			},
			
		},
		data() {
			return {
				showAgreementPopupData: false,
				
				canCloseAgreement: false, // 是否允许关闭协议弹框：未阅读的禁止关闭
				agreeBoxContent: '', // 协议内容
				
				showLockAccountPopup: false, // 封禁内容
				lockAccountTxt: '', // 是否显示封禁弹框
				
				isShowPrivas:false,
				
				// 系统通知
				systemNoticeData: null,
				isShowSystemNoticeUppop: false,
				
				// 授权弹框文案
				// #ifdef MP-WEIXIN
				mandateName: '授权申请',
				mandateTxt: '为了让您有更好的体验,旺卡抽赏需要获取您的手机号码用来抽赏、赏袋、个人中心的信息展示。',
				mandateConfirmTxt: '允许',
				// #endif
				
				// #ifdef APP-PLUS
				mandateName: '提示',
				mandateTxt: '您的账号已在其它地方登录,请重新授权！',
				mandateConfirmTxt: '重新登录',
				// #endif
				
				isStartupEnd: true,
				
				newpersonBannerIndex: 0,
				showNewPersonPopupData: false,
				newpersonBannerList: [],
				
				isLimitAmountRead: false,
				limitAmountTxt: '',
				timeLenStr: new Date().getTime(), // 时间戳
				
				lastPlatformPath: '', // 其他小程序二维码
				lastPlatformTxt: '', // 其他小程序二文案
				isShowLastPlatformPopup: false, // 提示其他小程序弹框
			};
		},
		computed: {
			
			// token信息
			token() {
				return store.getters.token;
			},
			
			// 每次进入小程序，只显示一次
			showNewPersonPopup() {
				return this.$store.getters.showNewPersonPopup;
			},
			
			// 是否显示用户信息授权弹框
			showAuthUserInfoUsers: {
				get() {
					return store.getters.showAuthUserInfoUsers;
				},
				set(v) {
					setAuthUserInfoUsers(false);
				}
			},
			
			
			hidePrivacyUsers(){
				return store.getters.hidePrivacyUsers;
			},

			// 用户信息
			userInfo() {
				return store.getters.userInfo || {};
			},

			// userInfo是否已有nickname
			isAuthUserInfoUsers() {
				return store.getters.isAuthUserInfoUsers;
			},
			
			
			// 充值授权时是否显示APP二维码
			showAppQrcodePopup: {
				get() {
					return store.getters.showAppQrcodePopup;
				},
				set(v) {
					store.commit('APP_QRCODE_SET_FUN', v);
				}
			},
			
			
			// 支付信息
			payBeInfos() {
				return store.getters.payBeInfos;
			},

			
			// userInfo是否已有phone
			isAuthPhoneUsers() {
				return store.getters.isAuthPhoneUsers;
			},

			

			// 是否显示协议弹框
			showAgreeTxtPopup: {
				get(v, ov) {
					const a = store.getters.showAgreeTxtPopup;
					if (a) this.getContentAgreeFun();
					return a;
				},
				set(v) {
					store.commit('SHOW_AGREEMENT_SET_FUN', v);
				}
			},

			// 是否显示入群二维码弹框
			showJoinGroupPopup: {
				get() {
					return store.getters.showJoinGroupPopup;
				},
				set(v) {
					store.commit('SHOW_GROUP_SET_FUN', v);
				}
			},
			
			// 充值授权显示APP二维码时文本内容
			wxpayTipContentPopup() {
				return store.getters.wxpayTipContentPopup;
			},
			
			// 是否显示手机号码授权弹框
			showAuthPhoneUsers: {
				get() {
					if(!store.getters.showAuthPhoneUsers) {
						store.commit('ONCE_RELOGIN_SET_FUN', false)
					}
					return store.getters.showAuthPhoneUsers;
				},
				set(v) {
					setAuthPhoneUsers(false);
				}
			},
			
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			
			// app显示启动页
			isShowStartupPage() {
				return store.getters.isShowStartupPage;
			},
			
			// 限额提醒
			showRechargePopup: {
				get() {
					const a = store.getters.showRechargePopup;
					return a
				},
				set(v) {
					store.commit('SHOW_RECHARGE_SET_FUN', v)
				}
			},
			
			commonOnline() {
				return store.getters.commonOnline;
			},
			
			// 主页发货规则弹框
			commonShowOrderRule() {
				return store.getters.commonShowOrderRule;
			},
			
			// 验证码弹框
			showCodePopupPopup: {
				get() {
					return store.getters.showCodePopupPopup;
				},
				set(v) {
					store.commit('SHOW_CODE_POPUP_SET_FUN', v);
				}
			},
			
			// 购买协议隐私条款
			showPrivacyPopup: {
				get() {
					const a = store.getters.showPrivacyPopup
					if (a) this.getContentAgreeFun();
					return a
				},
				set(v) {
					store.commit('SHOW_PRIVACY_SET_FUN', v)
				}
			},
			
			// 系统通知弹框
			showOnceNewsPopup() {
				return store.getters.showOnceNewsPopup;
			},
			
			// 单点登录弹框
			showOnceReloginPopup() {
				if(store.getters.showOnceReloginPopup) {
					this.mandateName = "提示";
					this.mandateTxt = "您的账号已在其它地方登录，请重新授权！";
					this.mandateConfirmTxt = "重新登录";
					setAuthPhoneUsers(true, 'onceRelogin');
				}else{
					// 授权弹框文案
					this.mandateName = '授权申请';
					this.mandateTxt = '为了让您有更好的体验，旺卡抽赏需要获取您的手机号码用来抽赏、赏袋、个人中心的信息展示。';
					this.mandateConfirmTxt = '允许';
				}
				return store.getters.showOnceReloginPopup;
			},
			
			
			// 轮询倒计时弹框
			showCountdownPopup: {
				get() {
					return store.getters.showCountdownPopup;
				},
				set(v) {
					store.commit('SHOW_COUNT_DOWN_POPUP_SET_FUN', v);
				}
			},
		},
		watch: {
			// 监听token
			token: {
				handler(v) {
					if (v) {
						// 保证页面onload执行完成，再调用这个
						setTimeout(async () => {
							if(this.isCurrentTabbarSence){
								// 跳转最新小程序
								// #ifdef MP-WEIXIN
								this.getLastPlatformFun();
								// #endif
								
								// 封禁违规用户
								const { code, msg } = await getCheckUserBanApi();
								if (code === 70001) {
									this.lockAccountTxt = msg;
									this.showLockAccountPopup = true;
									return;
								}
							}

							// 存在token时触发引入comRoot组件的execAfterToken事件，请求页面数据
							this.$emit('execAfterToken');
						});
					}
				},
				//当 watch 一个变量的时候，初始化时并不会执行你需要在created的时候手动调用一次。
				// 添加immediate属性，这样初始化的时候也会触发
				immediate: true
			},

			// 根据userInfo.is_view_pay_agreement获取用户是否已强制阅读协议
			userInfo: {
				handler() {
					this.canCloseAgreement = this.userInfo.is_view_pay_agreement;
				},
				immediate: true,
				deep: true
			},
			
			// 用户信息授权弹框 & 手机号码授权弹框
			showAuthUserInfoUsers() {
				const { showAuthUserInfoUsers, isAuthPhoneUsers } = this;
				if (isAuthPhoneUsers) return;
				if (!showAuthUserInfoUsers) {
					authPhoneSetFun(true);
				}
			},
		},
		async created() {
			
			// 打端初始化配置
			this.getConfigHomeApi()
			
			// 模拟数据
			if(this.isCurrentTabbarSence){ 
				// 获取新手专区
				await this.newbannerGetFun();
			}
			
			// #ifdef MP-WEIXIN
			// 每次进入小程序，只触发一次优惠券领取接口
			if(this.commonShowOrderRule){
				store.commit('SHOW_RULE_SET_FUN', false);
				// this.notice(); //发货须知
				this.showAgreementPopupData = true;
			}
			// #endif

			// 引入字体 font-hanserif-regular
			uni.loadFontFace({
				family: 'font-hanserif-regular',
				source: `url(${this.$store.getters.commonConfigs.domainFrontFileLink}/files/fonts/font-hanserif-regular.otf)`,
				success(res) {
					console.log('font-hanserif-regular success');
				},
				fail(err) {
					console.error(err);
				}
			});

			// 引入字体 font-hanserif-bold
			uni.loadFontFace({
				family: 'font-hanserif-bold',
				source: `url(${this.$store.getters.commonConfigs.domainFrontFileLink}/files/fonts/font-hanserif-bold.otf)`,
				success(res) {
					console.log('font-hanserif-bold success');
				},
				fail(err) {
					console.error(err);
				}
			});
			
			// 限额温馨提示
			if(this.isShowLimitWarm) {
				this.getLimitWarmTxtFun();
			}
			
			// #ifdef MP-WEIXIN
			this.getSystemNoticeFun();
			// #endif
		},
		mounted() {},
		
		destroyed() {
			
		},

		methods: {
			// 活动优惠
			async newbannerGetFun() {
				this.newpersonBannerList = [];
				let newpersonBannerList = [];
				
				// 新手专区
				const { data } = await getHomePersonPoolNewApi({
					pack_name: this.commonConfigs.appPackageName,
					version: this.commonConfigs.appPackageVer,
					platform: uni.getSystemInfoSync().platform,
					is_banner: 1, // 是否轮播图
					scene: 1
				});
				if(data && data.rows && data.rows.length) {
					data.rows[0].sceneType = 2; // 新手专区
					newpersonBannerList.push(data.rows[0]);
				}
				
				// 发货须知
				newpersonBannerList.push({
					sceneType: 3, // 发货须知
					id: 3,
					reward_pool_floor_cover: `${this.commonConfigs.domainFrontFileLink}/files/images/newerbornZone/swiper-popup-rules-bg.png`
				})
				
				this.newpersonBannerList = newpersonBannerList;
				
				// 每次进入小程序，只显示一次
				if(this.showNewPersonPopup && this.newpersonBannerList && this.newpersonBannerList.length){
					this.$store.commit('SHOW_NEW_PERSON_POPUP_SET_FUN', false);
					this.showNewPersonPopupData = true;
				}
			},
			
			// APP场景登陆 ["weixin", "univerify", "username", "smsCode", "apple"]
			async gooLoginFun(typeName) {
				uni.showLoading({
					title: '',
					mask: true
				});
			
				//处理手机号一键登录和手机帐密登陆 ： 预登录判断当前设备是否支持一键登录
				if (typeName === 'phone') {
					uni.preLogin({
						provider: 'univerify',
						success: async () => {
							await store.dispatch('LOGIN_GET_FUN', {
								loginType: 'univerify'
							});
			
							await uni.hideLoading();
						},
						fail: (res) => {
							// 预登录失败 进入 手机验证码登陆
							uni.navigateTo({
								url: '/app_page/login/login'
							});
							uni.hideLoading();
						},
						complete: (e) => {
							console.log('univerify:', e);
							uni.hideLoading();
						}
					});
				}
			},
			
			
			// 发货须知 设计图
			async notice(){
				const { data, code } = await getContentHomeApi({ type: 34 });
				
				if (code !== 200) {
					return;
				}
				
				this.agreeBoxContent = data.content;
				this.showAgreementPopupData = true;
			},
			
			 // 打端初始化配置
			 async getConfigHomeApi() {
				// #ifdef MP-WEIXIN
				await store.commit('ONLINE_STATUS_SET_FUN', false)
				// #endif
				 
			 	// #ifdef APP-PLUS
			 	let platform = uni.getSystemInfoSync().platform;
			 
			 	const {
			 		data
			 	} = await getConfigHomeApi({
			 		pack_name: this.commonConfigs.appPackageName,
			 		version: this.commonConfigs.appPackageVer,
			 		platform,
			 	});

			 	let isIOSShow = ((platform === 'android' || platform === 'devtools') ? false : !data.online)
			 	await store.commit('ONLINE_STATUS_SET_FUN', isIOSShow)
			 
			 	this.$forceUpdate();
			 	// #endif
			 },
			 
			
			// 跳转最新小程序
			async getLastPlatformFun(){
				const { data, code } = await getConfigNeedJumpApi();
				
				if (code !== 200) {
					return;
				}
				
				if(data && data.need_jump){
					this.lastPlatformPath = data.jump_path || '';
					this.lastPlatformTxt = data.content || '小程序已暂停服务, 请前往新小程序！';
					this.isShowLastPlatformPopup = true;
				}
			},
			
			getPhoneNumber(e) {
				store.dispatch('AUTH_PHONE_GET_FUN', e.detail);
			},
			
			async getSystemNoticeFun() {
				// #ifdef APP-PLUS
				if(!this.commonOnline) return;
				// #endif
				
				if(this.showOnceNewsPopup) {
					const { data, code } = await getEmailHomeApi();
					if(code === 200 && data) {
						this.isShowSystemNoticeUppop = true;
						this.systemNoticeData = data;
						await setAsyncFunWait(3800);
						this.isShowSystemNoticeUppop = false;
					}
					await store.commit('ONCE_NEWS_SET_FUN', false);
				}
			},
			
			checkRecharge() {
				this.isLimitAmountRead = !this.isLimitAmountRead;
			},
			
			async setPrivasFun() {
				// #ifdef MP-WEIXIN
				let title = '您需要同意《购买协议》&《隐私条款》才能申请手机号授权';
				
				if(this.showOnceReloginPopup) {
					title = '您需要同意《购买协议》&《隐私条款》才能申请授权';
				}
				
				if (!this.isShowPrivas) return uni.showToast({
					title,
					icon: 'none'
				});
				
				if(this.showOnceReloginPopup) {
					await (this.showAuthPhoneUsers = false);
					await store.dispatch('RE_LOGIN_GET_FUN');
				}
				// #endif
				
				// #ifdef APP-PLUS
				await (this.showAuthPhoneUsers = false);
				await store.commit('TOKEN_SET_FUN', null);
				await store.commit('USER_INFO_SET_FUN', {});
				await this.gooLoginFun('phone');
				// #endif
			},

			// 获取协议内容
			async getContentAgreeFun() {
				let type = '';
				if (this.commonOnline) {
					type = 20;
				} else {
					type = 10;
				}
				
				getContentHomeApi({
					type
				}).then((res) => {
					this.agreeBoxContent = res.data.content;
				});
			},
			
			// 限额温馨提示
			async getLimitWarmTxtFun() {
				getContentHomeApi({
					type: 56, // 限额提醒
				}).then(res => {
					this.limitAmountTxt = res.data.content
				})
			},
			
			async closeLimitWarmUppopFun() {
				if (!this.isLimitAmountRead) {
					return uni.showToast({
						title: '请阅读并同意...',
						icon: "error"
					});
				};
				
				this.showRechargePopup = false;
				
				uni.setStorage({
					key: 'PayNoticeTime',
					data: setParseFunTime(new Date(), 'YYYY-mm-dd')
				})
				await getUserPayNoticeHitApi();
			},

			// 内容查看：滚动到底部事件，确保用户已阅读
			async scrolltolower() {
				if (this.canCloseAgreement) return;

				await getUserViewPayAgreementApi();

				this.canCloseAgreement = true;
			},

			async startupPageCloseFun() {
				this.isStartupEnd = false;
				await store.commit('ONCE_FIRING_SET_FUN', false);
				this.getSystemNoticeFun();
			},
			
		}
	};
</script>

<style>
	.root-packbox {
		background-size: 100% 100%;
		background-position: 0;
		background-color: rgb(255, 255, 255);
		width: 100vw;
		min-height: 100vh;
	}

	.mask-view {
		left: 0;
		top: 0;
		z-index: 100000;
		background-color: rgba(0, 0, 0, 0.8);
		height: 100vh;
		width: 100vw;
	}

	.mask-modal {
		font-size: 42rpx;
		color: #000;
		background-color: #fff;
		border-radius: 22rpx;
		height: 302rpx;
		width: 502rpx;
	}
</style>
